<script>
    export let title = "网络安全试题";
    let isExpanded = false;
  
    function toggleExpansion() {
      isExpanded = !isExpanded;
    }
  </script>
  
  {#if isExpanded}
    <div class="quiz-container">
      <div class="quiz-header">
        <div class="quiz-icon">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.3327 1.33398C14.4373 1.33398 15.3327 2.22942 15.3327 3.33398V4.66732H13.9993V12.6673C13.9993 13.7719 13.1039 14.6673 11.9993 14.6673H2.66602C1.56145 14.6673 0.666016 13.7719 0.666016 12.6673V11.334H11.3327V12.6673C11.3327 13.0092 11.59 13.291 11.9216 13.3295L11.9993 13.334C12.3412 13.334 12.623 13.0767 12.6615 12.7451L12.666 12.6673V10.0007H1.99935V3.33398C1.99935 2.22942 2.89478 1.33398 3.99935 1.33398H13.3327Z" fill="#4551E5"/>
          </svg>
        </div>
        <span class="quiz-title">{title}</span>
        <div class="header-controls">
          <button class="control-btn" title="复制">📋</button>
          <button class="control-btn" title="下载">⬇️</button>
          <button class="control-btn collapse-btn" on:click={toggleExpansion} title="收起">
            ⤢
          </button>
        </div>
      </div>
      
      <div class="quiz-content-wrapper">
        <div class="quiz-content">
          <slot></slot>
        </div>
        <div class="fade-overlay"></div>
      </div>
    </div>
  {:else}
    <button class="collapsed-button" on:click={toggleExpansion}>
      <div class="button-icon">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.3327 1.33398C14.4373 1.33398 15.3327 2.22942 15.3327 3.33398V4.66732H13.9993V12.6673C13.9993 13.7719 13.1039 14.6673 11.9993 14.6673H2.66602C1.56145 14.6673 0.666016 13.7719 0.666016 12.6673V11.334H11.3327V12.6673C11.3327 13.0092 11.59 13.291 11.9216 13.3295L11.9993 13.334C12.3412 13.334 12.623 13.0767 12.6615 12.7451L12.666 12.6673V10.0007H1.99935V3.33398C1.99935 2.22942 2.89478 1.33398 3.99935 1.33398H13.3327Z" fill="#4551E5"/>
        </svg>
      </div>
      <span class="button-text">{title}</span>
    </button>
  {/if}
  
  <style>
    .quiz-container {
      border: 1px solid #4551E5;
      border-radius: 8px;
      background: white;
      margin: 16px 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
  
    .quiz-header {
      display: flex;
      align-items: center;
       
       border-bottom: 1px solid #EFEFF6;
      border-radius: 8px 8px 0 0;
      height: 40px;
      padding: 0 16px;
    }
  
    .quiz-icon {
      margin-right: 8px;
      display: flex;
      align-items: center;
    }
  
    .quiz-title {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      color: #000000;
      text-align:  left;
    }
  
    .header-controls {
      display: flex;
      gap: 4px;
      align-items: center;
    }
  
    .control-btn {
      background: none;
      border: none;
      padding: 6px;
      cursor: pointer;
      border-radius: 4px;
      font-size: 14px;
      color: #6b7280;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .control-btn:hover {
      background: rgba(107, 114, 128, 0.1);
      color: #374151;
    }
  
    .collapse-btn {
      transform: rotate(45deg);
    }
  
    .quiz-content-wrapper {
      position: relative;
      max-height: 285px;
      overflow: hidden;
    }
  
    .quiz-content {
      padding: 20px;
      font-size: 14px;
      line-height: 1.6;
      color: #374151;
      max-height: 285px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #d1d5db transparent;
    }
  
    .quiz-content::-webkit-scrollbar {
      width: 6px;
    }
  
    .quiz-content::-webkit-scrollbar-track {
      background: transparent;
    }
  
    .quiz-content::-webkit-scrollbar-thumb {
      background-color: #d1d5db;
      border-radius: 3px;
    }
  
    .quiz-content::-webkit-scrollbar-thumb:hover {
      background-color: #9ca3af;
    }
  
    .fade-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30px;
      background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9));
      pointer-events: none;
      border-radius: 0 0 8px 8px;
    }
  
    .collapsed-button {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background: white;
      border: 1px solid #4551E5;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 14px;
      color: #000000;
       margin: 8px 0;
       font-weight: 500;
    }
  
    .collapsed-button:hover {
      background: #f9fafb;
      border-color: #9ca3af;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
  
    .button-icon {
      margin-right: 8px;
      display: flex;
      align-items: center;
    }
  
    .button-text {
      font-weight: 500;
    }
  
    /* 全局样式用于slot内容 */
    /* :global(.quiz-content .question) {
      margin-bottom: 16px;
      font-weight: 500;
    }
  
    :global(.quiz-content .options) {
      margin: 16px 0;
    }
  
    :global(.quiz-content .option) {
      margin: 8px 0;
      padding-left: 0;
    }
  
    :global(.quiz-content .answer) {
      margin-top: 16px;
      padding: 12px;
      background: #f0f9ff;
      border-left: 3px solid #3b82f6;
      border-radius: 4px;
    }
  
    :global(.quiz-content .correct-answer) {
      font-weight: 600;
      color: #1e40af;
      margin-bottom: 8px;
    }
  
    :global(.quiz-content .explanation) {
      color: #4b5563;
      line-height: 1.6;
    } */
  </style>
